﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>js pb websocket</title>
    <!--　引入protobuf相关js文件　-->
    <script src="/proto/protobuf.min.js"></script>
    <script type="text/javascript">
        var WSMessage;
        var wsmessage;
        var wsmessage2;
        var buffer;
        var buffer2;
        protobuf.load("/proto/Message.proto", function (err, root) {
            if (err) throw err;
            WSMessage = root.lookup("wenlipackage.WSMessage");
            wsmessage = WSMessage.create({ id: "1", content: "hello,这是一个pb数据测试,", sender: "web", time: new Date().getTime() });
            wsmessage2 = WSMessage.create({ id: "1", content: "protobuf.js is a pure JavaScript implementation with TypeScript support for node.js and the browser. It's easy to use, blazingly fast and works out of the box with .proto files!", sender: "web", time: new Date().getTime() });
            buffer = WSMessage.encode(wsmessage).finish();
            buffer2 = WSMessage.encode(wsmessage2).finish();
        });
    </script>
    <script type="text/javascript">

        var websocket;

        var wsUri = "ws://127.0.0.1:16666/";

        var output;

        function init() {
            output = document.getElementById("output");
            testWebSocket();

            setTimeout(function () {
                writeToScreen("请求连接断开...");
                websocket.close();
            }, 5000);
        }

        function testWebSocket() {
            websocket = new WebSocket(wsUri);
            websocket.onopen = function (evt) {
                onOpen(evt)
            };
            websocket.onclose = function (evt) {
                onClose(evt)
            };
            websocket.onmessage = function (evt) {
                onMessage(evt)
            };
            websocket.onerror = function (evt) {
                onError(evt)
            };
        }
        function onOpen(evt) {
            writeToScreen("连接到服务器");
            doSend(buffer, wsmessage);
            doSend(buffer2, wsmessage2);
        }
        function onClose(evt) {
            writeToScreen("收到服务器回复：连接已断开");
        }
        function onMessage(evt) {
            var reader = new FileReader();
            reader.readAsArrayBuffer(evt.data);
            reader.onload = function (e) {
                var buf = new Uint8Array(reader.result);
                writeToScreen('<span style="color: blue;">服务器回复内容: ' + WSMessage.decode(buf).content + '</span>');
            }

        }
        function onError(evt) {
            writeToScreen('<span style="color: red;">异常:</span> ' + evt.data);
        }
        function doSend(buf, wsm) {
            writeToScreen("发送内容: " + wsm.content);
            websocket.send(buf);
        }
        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML = message;
            output.appendChild(pre);
        }
        window.addEventListener("load", init, false);
    </script>
</head>
<body>
    <div id="output"></div>
</body>
</html>